<template>
  <div>
    <V-CommonHeaderLeft>
      <div style="padding:0 10px 0 0; width:100%;overflow: hidden;">
        <navigation :msg="navMsg"></navigation>
        <NavSearch :searchData="searchData"></NavSearch>
        <el-table :height="tableHeight" :data="tableData">
          <el-table-column label="商品分类" width="200" style="text-align:center" class="td-left">
            <template slot-scope="scope">
              <div class="classification">
                <p>{{scope.row.num.num}}</p>
                <div class="classification-right">
                  <div class="classification-right-top">{{scope.row.num.title}}</div>
                  <div class="classification-right-down">{{scope.row.num.nums}}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商品图片" :render-header="renderHeader" width="calc(100% - 202px)">
            <template slot-scope="scope">
              <div class="photo-right">
                <div class="photo-right-top" v-if="scope.row.statu.sel1">
                  <div class="photo-right-top-left">
                    <div class="photo-right-top-left-jiantou">
                      <span class="iconfont icon-test225"></span>
                    </div>
                    <div class="photo-right-top-left-img">
                      <ul>
                        <li>
                          <img src="../../../static/images/100.jpg" alt>
                        </li>
                        <li>
                          <img src="../../../static/images/100.jpg" alt>
                        </li>
                        <li>
                          <img src="../../../static/images/100.jpg" alt>
                        </li>
                        <li>
                          <img src="../../../static/images/100.jpg" alt>
                        </li>
                      </ul>
                    </div>
                    <div class="photo-right-top-left-jiantou">
                      <span class="iconfont icon-test146"></span>
                    </div>
                  </div>
                  <div class="photo-right-top-right">
                    <p>商品相册</p>
                    <button>添加</button>
                  </div>
                </div>
                <div class="photo-right-top" v-if="scope.row.statu.sel2">
                  <div class="photo-right-top-left">
                    <div class="photo-right-top-left-jiantou">
                      <span class="iconfont icon-test225"></span>
                    </div>
                    <div class="photo-right-top-left-img">
                      <ul>
                        <li>
                          <img src="../../../static/images/100.jpg" alt>
                        </li>
                        <li>
                          <img src="../../../static/images/100.jpg" alt>
                        </li>
                        <li>
                          <img src="../../../static/images/100.jpg" alt>
                        </li>
                        <li>
                          <img src="../../../static/images/100.jpg" alt>
                        </li>
                      </ul>
                    </div>
                    <div class="photo-right-top-left-jiantou">
                      <span class="iconfont icon-test146"></span>
                    </div>
                  </div>
                  <div class="photo-right-top-right">
                    <p>商品相册</p>
                    <button>添加</button>
                  </div>
                </div>
                <div class="photo-right-top" v-if="scope.row.statu.sel3">
                  <div class="photo-right-top-left">
                    <div class="photo-right-top-left-jiantou">
                      <span class="iconfont icon-test225"></span>
                    </div>
                    <div class="photo-right-top-left-img">
                      <ul>
                        <li>
                          <img src="../../../static/images/100.jpg" alt>
                        </li>
                        <li>
                          <img src="../../../static/images/100.jpg" alt>
                        </li>
                        <li>
                          <img src="../../../static/images/100.jpg" alt>
                        </li>
                        <li>
                          <img src="../../../static/images/100.jpg" alt>
                        </li>
                      </ul>
                    </div>
                    <div class="photo-right-top-left-jiantou">
                      <span class="iconfont icon-test146"></span>
                    </div>
                  </div>
                  <div class="photo-right-top-right">
                    <p>商品相册</p>
                    <button>添加</button>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <Paging :msg="50" @pageNum="getPageNum" @pageId="getPageId"></Paging>
      </div>
    </V-CommonHeaderLeft>
  </div>
</template>

<script>
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
import NavSearch from '@/components/common/navSearch/NavSearch'
import Paging from '@/components/common/paging/Paging'
import navigation from '@/components/common/navigation/Navigation'

export default {
  data () {
    return {
      navMsg: [
        {
          name: '商品',
          path: '/commodityList'
        }, {
          name: '商品图片',
          path: '/commodityPictures'
        }
      ],
      searchData: [
        {
          numberingBox: true
        },
        [
          {
            placeholder: '状态',
            classificationList: [],
            labelList: ['下架', '上架']
          },
          {
            placeholder: '商品相册',
            classificationList: [],
            labelList: ['无图片', '1张图', '2张图', '3张图', '4张图', '不小于5张']
          },
          {
            placeholder: '请选择分类',
            classificationList: [
              {
                name: '饮料',
                children: [{
                  name: '毛衣',
                  children: [{
                    name: '衣服',
                    children: []
                  }]
                }]
              },
              {
                name: '卫衣',
                children: []
              },
              {
                name: '连衣裙',
                children: []
              },
              {
                name: '打底衫',
                children: []
              },
              {
                name: '短袖T恤',
                children: []
              },
              {
                name: '袜子',
                children: [{
                  name: '打底袜',
                  children: []
                },
                {
                  name: '隐形袜',
                  children: []
                },
                {
                  name: '运动袜',
                  children: []
                },
                {
                  name: '儿童袜',
                  children: []
                },
                {
                  name: '堆堆袜',
                  children: []
                },
                {
                  name: '商务袜',
                  children: []
                }]
              },
              {
                name: '下装',
                children: [
                  {
                    name: '短裤',
                    children: []
                  },
                  {
                    name: '铅笔裤',
                    children: []
                  },
                  {
                    name: '打底裤',
                    children: []
                  },
                  {
                    name: '牛仔裤',
                    children: []
                  },
                  {
                    name: '半身裙',
                    children: []
                  },
                  {
                    name: '短裙',
                    children: []
                  }]
              },
              {
                name: '上装',
                children: [
                  {
                    name: '针织衫',
                    children: []
                  },
                  {
                    name: '衬衫',
                    children: []
                  }
                ]
              },
              {
                name: '箱包',
                children: [
                  {
                    name: '鞋子',
                    children: [
                      {
                        name: '其他',
                        children: []
                      },
                      {
                        name: '凉鞋',
                        children: []
                      },
                      {
                        name: '粗跟',
                        children: []
                      },
                      {
                        name: '中跟',
                        children: []
                      },
                      {
                        name: '细跟',
                        children: []
                      },
                      {
                        name: '厚底松糕鞋',
                        children: []
                      }
                    ]
                  },
                  {
                    name: '双肩包',
                    children: []
                  },
                  {
                    name: '水桶包',
                    children: []
                  },
                  {
                    name: '手提包',
                    children: []
                  },
                  {
                    name: '拉杆箱',
                    children: []
                  },
                  {
                    name: '小方包',
                    children: []
                  }
                ]
              },
              {
                name: '未分类',
                children: []
              }
            ],
            labelList: []
          },
          {
            placeholder: '商品详情图',
            classificationList: [],
            labelList: ['无图片', '1张图', '2张图', '3张图', '4张图', '不小于5张']
          }
        ], {}
      ],
      pageNum: 15, // 每页默认显示15条,
      pageId: 1, // 页面id,第几页
      tableHeight: window.innerHeight - 223,
      tableData: [
        {
          num: {
            num: 1,
            title: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装',
            nums: 99032
          },
          picture: {

          },
          statu: {
            sel1: true,
            sel2: false,
            sel3: false
          }
        },
        {
          num: {
            num: 2,
            title: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装',
            nums: 99032
          },
          picture: {

          },
          statu: {
            sel1: true,
            sel2: false,
            sel3: false
          }
        },
        {
          num: {
            num: 3,
            title: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装',
            nums: 99032
          },
          picture: {

          },
          statu: {
            sel1: true,
            sel2: false,
            sel3: false
          }
        },
        {
          num: {
            num: 4,
            title: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装',
            nums: 99032
          },
          picture: {

          },
          statu: {
            sel1: true,
            sel2: false,
            sel3: false
          }
        },
        {
          num: {
            num: 5,
            title: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装',
            nums: 99032
          },
          picture: {

          },
          statu: {
            sel1: true,
            sel2: false,
            sel3: false
          }
        }
      ]
    }
  },
  created () {
    // console.log(this.tableHeight)
  },
  watch: {
    tableHeight (val) {
      if (!this.timer) {
        this.tableHeight = val
        this.timer = true
        let that = this
        setTimeout(function () {
          that.timer = false
        }, 400)
      }
    }
  },
  mounted () {
    const that = this
    window.onresize = () => {
      return (() => {
        window.tableHeight = window.innerHeight - 223
        that.tableHeight = window.tableHeight
      })()
    }
  },
  components: {
    NavSearch,
    Paging,
    VCommonHeaderLeft,
    navigation
  },
  methods: {

    sliceArray (array, size, id) {
      let result = []
      for (let x = 0; x < Math.ceil(array.length / size); x++) {
        let start = x * size
        let end = start + size
        result.push(array.slice(start, end))
      }
      return result[id]
    },
    getPageId (id = 1) {
      this.pageId = id
      // this.stock = this.sliceArray(this.parentMsg, this.pageNum, id - 1)
    },
    getPageNum (num) {
      // console.log(num)
      this.pageNum = num
      this.getPageId()
      // console.log(this.stock)
    },
    renderHeader (h, { column }) {
      return h(
        'div',
        [
          h('span', column.label),
          h('el-checkbox', {
            style: 'display:inline-flex;margin-left:30px;margin-right:5px',
            props: {
              value: this.tableData[0].statu.sel1
            },
            on: {
              change: ($event, column) => this.select1($event, column)
            }
          }),
          h('span', '商品相册'),
          h('el-checkbox', {
            style: 'display:inline-flex;margin-left:30px;margin-right:5px',
            on: {
              change: ($event, column) => this.select2($event, column)
            }
          }),
          h('span', '商品详情图'),
          h('el-checkbox', {
            style: 'display:inline-flex;margin-left:30px;margin-right:5px',
            on: {
              change: ($event, column) =>
                // this.sel3 = !this.sel3
                // console.log(this.sel3)
                // this.select3()
                this.select3($event, column)
              // 选中事件 $event, column，这里$event=true,column是input的dom当在select里打印的时候
            }
          }),
          h('span', '商品规格')
        ]
      )
    },
    select1 ($event, column) {
      for (var i = 0; i < this.tableData.length; i++) {
        this.tableData[i].statu.sel1 = $event
      }
    },
    select2 ($event, column) {
      for (var i = 0; i < this.tableData.length; i++) {
        this.tableData[i].statu.sel2 = $event
      }
    },
    select3 ($event, column) {
      for (var i = 0; i < this.tableData.length; i++) {
        this.tableData[i].statu.sel3 = $event
      }
    }

  },
  computed: {
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-table tbody tr:hover > td {
  background-color: #fff;
}
/deep/ thead {
  tr {
    th {
      padding: 0;
      background-color: #fcfcfc;
      font-weight: 400;
      border-top: 1px solid #ebeef5;
      line-height: 50px;
    }
  }
}
.classification {
  display: flex;
  align-items: center;
  p {
    padding: 0 25px 0 20px;
  }
  .classification-right-top {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 20px;
    margin-right: 15px;
  }
  .classification-right-down {
    text-align: center;
    line-height: 30px;
    margin-right: 15px;
  }
}
/deep/ table {
  tbody {
    tr {
      td:first-child {
        border-right: 1px solid #e3e3e3;
      }
      td {
        padding: 0;
      }
    }
  }
}
.photo-right {
  align-content: center;
  .hide {
    display: none !important;
  }
  .photo-right-top {
    margin: 20px 0;
    padding-bottom: 20px;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    height: 102px;
    align-items: center;
    width: 100%;
    .photo-right-top-left {
      width: calc(100% - 112px);
      display: flex;
      .photo-right-top-left-jiantou {
        width: 36px;
        height: 102px;
        border: 1px solid #f5f5f5;
        background-color: #fcfcfc;
        text-align: center;
        line-height: 102px;
        span {
          line-height: 0;
        }
        .icon-test225:before,
        .icon-test146:before {
          color: #bdbdbd;
          font-size: 20px;
        }
      }
      .photo-right-top-left-img {
        margin: 0 10px;
        width: calc(100% - 72px);
        overflow: hidden;
        ul {
          display: flex;
          li {
            margin: 0 5px;
          }
        }
      }
    }
    .photo-right-top-right {
      width: 96px;
      height: 70px;
      text-align: center;
      display: inline-block;
      margin-left: 16px;
      vertical-align: middle;
      p {
        margin-bottom: 16px;
        font-size: 12px;
        color: #bdbdbd;
      }
      button {
        width: 94px;
        height: 30px;
        line-height: 30px;
        background-color: #20ade5;
        color: #fff;
        font-size: 14px;
        border: none;
        border-radius: 2px;
        vertical-align: middle;
      }
    }
  }
}
</style>
